<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" th:href="@{/}+'layuiadmin/style/admin.css'" media="all">
<script th:src="@{/}+'js/daterangepicker/moment.min.js'"></script>
<script th:src="@{/}+'js/daterangepicker/daterangepicker.js'"></script>
<link rel="stylesheet" th:href="@{/}+'js/daterangepicker/daterangepicker.css'" media="all">
<script th:src="@{/}+'js/day.js'"></script>
<style type="text/css">
.layui-inline{
	width:136px!important
}
</style>
</head>
<body>
<div class="layui-fluid">
  <div class="layui-card">  
    <div class="layui-card-body">
    <div class="layui-row layui-col-space5">
      <div class="layui-row">
      <div class="layui-inline">
         <input type="text" id="name" placeholder="用户名称/电话号码" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-inline" style="width:180px!important">
         <input type="text" id="loginDateRange" name="loginDateRange" placeholder="登录日期" autocomplete="off" class="layui-input">
      </div>
     <div class="layui-btn-group">
    <button type="button" class="layui-btn layui-btn-primary" id="queryBtn" data-type="queryBtn">查询</button>
  </div>
  </div>
  <div class="layui-row">
  <table id="log-table" lay-filter="log-table"></table>
  </div>
  </div>
    </div>
  </div>
</div>
 <script th:inline="javascript">
/*<![CDATA[*/
var naviid=[[${naviid}]]    
/*]]>*/
</script>
<script th:inline="none">
$('input#loginDateRange').daterangepicker({
	autoUpdateInput:false,
	ranges: _date_ranges
});
layui.use(['table','form'], function(){
  var form = layui.form
  ,table = layui.table;
  table.render({
    elem: '#log-table'
    ,url: 'loginLog/getPageList' 
    ,cols: [[
      {type: 'numbers'}
      ,{field: 'id', width: 100, title: 'ID',hide:true}
      ,{field: 'userName', title: '用户名称', width: 110}
      ,{field: 'ip', title: '用户IP', width: 125}
      ,{field: 'loginTime', title: '登录时间',width:170}
      ,{field: 'logoutTime', title: '退出时间',width:170}
      ,{field: 'userId', title: '所属部门',width:120}
      ,{field: 'browser', title: '客户端信息'}
      ,{field: 'state', title: '状态', width:90,templet:function(d){
    	  if(d.status=='在线'){
    		  return "<label style='color:green;font-family:幼圆'>" + d.state + "</label>";
    	  }
    	  return d.state;
      }}
    ]]
    ,page: true
    ,limit: 30
    ,height: top.height - 100
    ,text: '对不起，加载出现异常！'
    ,done:function(){
    	enableRowClick(table,form,'log-table',"log-table");
     }	
  });
  var action = {
	queryBtn: function(){
		var whr = {name:$('#name').val(),loginDateRange:$("#loginDateRange").val()};	 
		table.reload("log-table",{where:whr}) 
	}
  };
  $('.layui-btn[data-type]').each(function(i,obj){
	  $(this).on('click', function(){
		   var type = $(this).data('type');
		   action[type].call(this);
	  })
  });
});
</script>
</body>